sass

2023-04-02 03:22| 来源: 网络整理| 查看: 265

一、介绍

svelte.js前端新框架爆火，可是网上关于svelte.js开发的组件库及后台系统比较少。于是就自己动手开发了一个svelte-ui组件库和svelte-admin后台管理系统。

Svelte Ui Admin 一款基于svelte3.x+svelteKit+svelte-ui+sass+mockjs等技术构建的中后台管理。

二、技术实现开发工具：Vscode技术框架：svelte3.x+svelteKit+vite3UI组件库：svelte-ui (基于svelte自定义pc端UI组件库)图表组件：echarts^5.3.3图文编辑器：wangeditor^4.7.15国际化方案：svelte-i18n^3.4.0数据模拟：mockjs^1.1.0

svelte-admin支持动态化换肤、中英文/繁体国际化语言。

目录结构

Svelte-Ui组件库

项目中所有的组件均是遵循使用svelte-ui组件库。整体风格统一美观。

svelte-ui桌面pc端UI组件库

公共布局模板

svelte-admin整体分为顶部导航条+左侧动态路由菜单+右侧主内容区域三个模块。

{#if rootRouteEnable} {/if} {#if (rootRouteEnable && route != '/') || !rootRouteEnable} {/if}

+error.svelte错误处理

import { page } from '$app/stores' import { goto } from '$app/navigation' import { Button } from '$lib/svelte-ui' function goHome() { goto('/home/index') } {$page.status} Error! ┗| {$page.status} |┛ Page Error~~ {$page.error.message} Go Home svelte-i18n国际化

项目路由菜单及页面支持动态配置中英文/繁体多语言。

npm i svelte-i18n

/** * 国际化语言配置 * @author YXY */ import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n' import { browser } from '$app/env' import Storage from '@/utils/storage' // 引入语言配置 import cn from '@/locale/zh-CN' import tw from '@/locale/zh-TW' import en from '@/locale/en-US' export const langKey = 'lang' export const langVal = 'cn' addMessages('cn', cn) addMessages('tw', tw) addMessages('en', en) const lang = getLang() console.log('当前国际化：', lang) init({ fallbackLocale: lang, initialLocale: getLocaleFromNavigator() }) setHtmlLang(lang) /* 获取语言 */ export function getLang() { const lang = Storage.get(langKey) return lang || langVal } /* 持久化存储 */ export function setLang(lang, reload = false) { if(lang != getLang()) { Storage.set(langKey, lang || '') setHtmlLang(lang) // 重载页面 if(reload) { window.location.reload() } } }svelte动态图表配置

为了解决多个地方使用图表的问题，新建了一个图表hooks文件。

/** * @title 动态图表Hooks * @author YXY */ import * as echarts from 'echarts' import elementResizeDetector from "element-resize-detector" import utils from '@/utils' export const useCharts = async(node, options) => { let chartInstance let chartNode = null let erd = elementResizeDetector() const resizeFn = utils.debounce(() => { chartInstance.resize() }, 100) if(node) { chartInstance = echarts.init(node) chartInstance.setOption(options) chartNode = chartInstance } erd.listenTo(node, resizeFn) }

好了，基于svlete-ui开发后台管理系统就先分享这么多。后续会陆续分享一些实例项目。

https://segmentfault.com/a/11...

【本文地址】

sass

sass

今日新闻

推荐新闻